<template>
  <div>
    <ul>
      <li v-for="item in goodslist" :key='item.id'>
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              <mt-switch></mt-switch>
              <img :src="imgBaseUrl+item.thumb_path">
              <div class="info">
                <h4>{{item.title}}</h4>
                <div class="price">
                  <span>&yen;{{item.sell_price}}</span>
                  <shopCarNumber :initcount='getGoodsCount[item.id]' :id='item.id'></shopCarNumber>
                  <a href="#">删除</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              <div>
                <p>总计（不含运费）</p>
                <p>已勾选商品<span class="red">0</span>件&nbsp;总件：<span class="red">&yen;0</span></p>
              </div>
              <mt-button type="danger">去结算</mt-button>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  import shopCarNumber from '../subcomm/shopcarnumber.vue'
  import config from '../../js/globalConfig'
  export default {
    data() {
      return {
        goodslist: [],
        imgBaseUrl: config.imgBaseURL
      }
    },
    created() {
      this.getGoodsList()
    },
    methods: {
      getGoodsList() {
        var idarr = this.$store.state.car.map(item => {
          return item.id
        })
        if (idarr.length == 0) return;
        var isstr = idarr.join(',')
        this.$http.get('api/goods/getshopcarlist/' + isstr).then(res => {
          if (res.body.status == 0) {
            this.goodslist = res.body.message;
          } else {
            console.log('请求购物车数据失败')
          }
        })
      }
    },
    computed:{
      getGoodsCount(){
        var o=[];
        this.$store.state.car.forEach(item=>{
          o[item.id]=item.count
        })
        return o;
      }
    },
      components: {shopCarNumber}
  }
</script>
<style lang="scss" scoped>
  ul {
    background-color: #eee;
    overflow: hidden;
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      .red {
        color: red;
      }
      .mui-card-content-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 50px;
          height: 60px;
          margin: 0 10px;
        }
        .info {
          flex: 1;
          h4 {
            font-size: 14px;
          }
          .price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              color: red;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
</style>
